<template>
  <div id="app">
    <el-container style="height: 100vh;">
      <el-aside width="200px" style="background-color: rgb(255, 255, 255)" v-if="!isPhone">
        <el-menu :default-active="$route.name" @select="onSelect" mode="vertical">
          <el-menu-item
            :index="item.name"
            v-for="(item, index) in usedRoutes"
            :key="index"
            >{{ item.meta.title }}
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <el-main>
          <el-aside style="background-color: rgb(255, 255, 255)" v-if="isPhone">
            <el-menu :default-active="$route.name" @select="onSelect" mode="horizontal">
              <el-menu-item
                :index="item.name"
                v-for="(item, index) in usedRoutes"
                :key="index"
                >{{ item.meta.title }}
              </el-menu-item>
            </el-menu>
          </el-aside>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import "./assets/style.css";
import routes from "./router/routes";

export default {
  name: "app",
  components: {},
  data() {
    return {
      usedRoutes: routes.filter(item => item.meta),
    };
  },
  methods: {
    onSelect(index) {
      this.$router.push(index)
    }
  },
  computed: {
    isPhone() {
      const isPhone = window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      return isPhone ? true : false
    }
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>
